<template>
	<view class="">
		<view class="massage-nav-bar" :style="{'background-color':backColor}">
			<view class="back" @click="back">
				<image v-if="!isshow" :src="$util.imgurl('imgs/massage/back.png')" mode=""></image>
				<image v-if="isshow"  :src="$util.imgurl('imgs/massage/left.png')" mode=""></image>
			</view>
			<view class="" v-if="showName" style="color: #333;">
				{{detailData.store_name}} - {{detailData.technician_nickname || detailData.real_name}}
			</view>
			<view class="right-icon">
				<!-- <image :src="$util.imgurl('imgs/massage/xuan.png')" mode=""></image> -->
				<image v-if="!isshow" @click="share" style="margin-left: 30rpx;" :src="$util.imgurl('imgs/massage/share.png')" mode="">
				</image>
				<image v-if="isshow" style="width: 35rpx;height: 35rpx;" :src="$util.imgurl('imgs/massage/share-s.png')" mode="">
				</image>
			</view>
		</view>
		<view class="technician-imgs">
			<swiper v-if="isselect == 1" @change="swiperchange">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="toVideo(item.image,item.type)">
					<view class="swiper-item">
						<image :src="item.image" mode="aspectFill" v-if="item.type == 'img'"></image>
						<image v-else :src="item.image + '?vframe/jpg/offset/8/'" mode="aspectFill"></image>
						<image v-if="item.type == 'video'" class="play-icon" src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/star.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view v-if="isselect == 0" @change="swiperchange">
				<view @click="toVideo(detailData.work_clothes_image,'img')">
					<view class="swiper-item">
						<image :src="detailData.work_clothes_image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="choose-content">
			<view class="imgs-choose" :id="swiperList && swiperList.length ? '' : 'transparent'">
				<view @click="swiperImg(0)" :class="isselect == 0?'select-btn':''">头像</view>
				<view @click="swiperImg(1)" :class="isselect == 1?'select-btn':''" v-if="swiperList.length">相册</view>
			</view>
		</view>
		<view class="technician-info-content">
			<view class="inner-content">
				<view class="technician-popup-info">
					<view class="technician-info-lines">
						<view class="name">{{detailData.technician_nickname || detailData.real_name}}</view>
						<view class="today-time" v-if="detailData.online && fast_time">
							<view class="titles">今日可约</view>
							<!-- <view class="time">{{detailData.start_time}}</view> -->
							<view class="time">{{fast_time}}</view>
						</view>
						<view class="today-no-time " v-else>
							<view class="titles">今日不可约</view>
						</view>
						<view class="right-address">
							<image :src="$util.imgurl('/imgs/massage/address.png')" mode=""></image>
							<view v-if="juli">{{(juli / 1000).toFixed(2)}}km</view>
							<view v-else>{{(detailData.juli / 1000).toFixed(2)}}km</view>
						</view>
					</view>
					<view class="authentication-information ">
						<view class="qualification-list" style="border-radius: 10rpx;height: 46rpx;padding: 0 16rpx;">
							<view class="qualification-item" @click="viewQualification">
								<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
								<view>实名认证</view>
								<!-- <view>{{detailData.nation}}</view> -->
								<view>{{detailData.age}}</view>
							</view>
							
						</view>
						<view class="attion-num">
							<image v-if="detailData.is_collect == 0"
								src="https://qiniu-cdn.maeiyun.com/imgs/massage/attion.png"
								@click="collect(detailData.id)" mode=""></image>
							<image v-else @click="collect(detailData.id)"
								src="https://qiniu-cdn.maeiyun.com/imgs/massage/select-attion.png" mode=""></image>
							<view>{{detailData.collect}}人关注</view>
						</view>
					</view>
					<view class="shop-lines" @click="openPoupon">
						<uni-icons custom-prefix="iconfont" type="icon-dianpu1" color="#333" size="12"></uni-icons>
						<view>{{detailData.store_name}}</view>
						<uni-icons type="forward" color="#333" :size="14"></uni-icons>
					</view>
					<view class="technician-datum-list-content">
						<view style="background-color: #F5F6F7;padding:10rpx 30rpx;">
							<view class="technician-datum-list">
								<view class="item-datum">
									<view class="titles">籍贯</view>
									<view class="desc">{{detailData.city}}</view>
								</view>
								<view class="item-datum" v-if="detailData.constellation != 'undefined'">
									<view class="titles">星座</view>
									<view class="desc">{{detailData.constellation}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">性别</view>
									<view class="desc">{{detailData.gender == 1?'男':'女'}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">民族</view>
									<view class="desc">{{detailData.nation}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">工龄</view>
									<view class="desc">{{detailData.experience}}年</view>
								</view>
								<view class="item-datum">
									<view class="titles">手法</view>
									<view class="desc">{{detailData.star}}星</view>
								</view>
								<view class="item-datum">
									<view class="titles">身高</view>
									<view class="desc">{{detailData.height}}cm</view>
								</view>
								<view class="item-datum">
									<view class="titles">体重</view>
									<view class="desc">{{detailData.weight}}kg</view>
								</view>
							</view>
							<view class="brief-introduction" >
								正规绿色服务!擅长中式推拿、精油SPA、美容理疗，有
								按摩师证，手法专业，期待您的关注和预约~
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="qualification-list">
				<view class="qualification-item">
					<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
					<view>实名认证</view>
				</view>
				<view class="qualification-item">
					<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
					<view>按摩师证</view>
				</view>
				<view class="qualification-item">
					<image :src="$util.imgurl('/imgs/massage/vip-icoc.png')" mode=""></image>
					<view>头像验真</view>
				</view>
				<view class="look-detail" @click="viewQualification">
					查看
					<uni-icons type="right" color="#6E4E37" size="14"></uni-icons>
				</view>
			</view>
			<view class="inner-content">
				<view class="serve-title">
					<view class="serve-left-title">
						<view>服务项目</view>
					</view>
					<view class="nums" @click="toping" v-if="isPing">
						{{detailData.opinion}}条评论 <text>好评 {{((detailData.high_opinion/detailData.opinion || 0)*100).toFixed(0)}}%</text>
						<uni-icons type="right" color="#6E4E37" size="14"></uni-icons>
					</view>
				</view>
				<view class="">
					<serviceList :online="detailData.online" @bookNow="bookNow" v-if="detailData.id" :id="Number(detailData.id)"></serviceList>
				</view>
			</view>
		</view>
		
		<store ref="popup"></store>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	import store from '@/components/store/store.vue'
	export default {
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		components:{
			store
		},
		data() {
			return {
				isvertical: false,
				detailData: {},
				menu: [{
						'name': '服务',
						"id": 0
					},
					{
						'name': '详情',
						"id": 1
					},
					{
						'name': '评价',
						"id": 2
					},
				],
				current: 0, //菜单切换
				backColor: 'rgba(255, 255, 255, 0)',
				isshow: false,
				itemtechnician: {},
				isselect: 0,
				imgIndex: 0,
				day: 0,
				fast_time: 0,
				isyue:'false',
				isPing:true,
				swiperList:[],
				showName:false,
				juli:0
			}
		},
		onLoad(option) {
			var that = this
			this.id = option.id
			this.juli = option.juli?option.juli:0
			this.getDetail()
			this.getShare()
			uni.getSystemInfo({
				success: function (res) {
					if(res.brand == 'Huawei' || res.brand == 'huawei'){
						that.isPing = false
					}
				}
			});
		},
		onPageScroll(e) {
			if(e.scrollTop>100){
				this.showName = true
				this.backColor = '#fff'
				this.isshow = true
			}else{
				this.showName = false 
				this.backColor = 'rgba(255, 255, 255, 0)'
				this.isshow = false
			}
		},
		methods: {
			openPoupon(){
				this.$refs.popup.open(this.detailData.store_id)
			},
			toVideo(e,type){
				if(type == 'img'){
					if(this.isselect == 0){
						uni.previewImage({
							current:e,
							urls:[e]
						})
					}else{
						let list = []
						this.swiperList.map(item=>{
							if(item.type == 'img'){
								list.push(item.image)
							}
						})
						uni.previewImage({
							current:e,
							urls:list
						})
					}
					
				}else {
					uni.navigateTo({
						url:'/technician/video/video?src=' + e
					})
				}
			},
			toping(){
				uni.navigateTo({
					url:'/otherpages/technician/eval?id='+this.id
				})
			},
			share(){
				var obj = {}
				if(this.shareData.open_type == 0 || this.shareData.open_type == 1){
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: this.shareData.path+ '?pid=' + uni.getStorageSync('user').id,
						title: this.shareData.title,
						summary:this.shareData.content,
						imageUrl: this.shareData.image,
						success: function (res) {
						},
						fail: function (err) {
							// console.log("fail:" + JSON.stringify(err));
						}
					});
				}else if(this.shareData.open_type == 5){
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: this.shareData.open_type,
						title: this.shareData.title,
						imageUrl: this.shareData.image,
						miniProgram: {
							id: this.shareData.appid,
							path: this.shareData.path+ '?pid=' + uni.getStorageSync('user').id,
							type: 0,
							webUrl: this.shareData.path+ '?pid=' + uni.getStorageSync('user').id
						},
						success: function (res) {
							// console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							// console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				
			},
			getShare(){
				var that = this
				this.request.httpTokenRequest({
					url: "index/getShareConfig",
					method: "get"
				}, {
					type:2
				}).then(function(data) {
					if(data.code == 0){
						that.shareData = data.data
					}
				})
			},
			swiperImg(type) {
				if (type == 1) {
					this.imgIndex = 1
				}
				this.isselect = type
			},
			swiperchange(data) {
				if (data.detail.current == 1) {
					this.isselect = 1
				}
			},
			back() {
				uni.navigateBack()
			},
			bookNow(item) { // 服务项目信息
				uni.navigateTo({
					url: '/otherpages/massage/massageDetail?id=' + item.service_id+'&tid='+this.id
				})
			},
			viewQualification() { //查看资质
				uni.navigateTo({
					url: '/otherpages/massage/realnameAuth?id=' + this.id
				})
			},
			collect(id) { //技师、服务收藏
				var that = this
				this.request.httpTokenRequest({
					url: "service/collect",
					method: "POST"
				}, {
					id: id,
					type: 1, //1=技师，2=服务
				}).then(function(data) {
					if (data.code == 0) {
						that.$set(that.detailData, 'is_collect', that.detailData.is_collect == 1 ? 0 : 1)
						if(that.detailData.is_collect == 1){
							that.detailData.collect++
						}else{
							that.detailData.collect--
						}
						that.$util.msg(data.msg)
					} else {

					}
				})
			},
			getDetail() {
				var that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianInfo",
					method: "get"
				}, {
					technician_id: this.id,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
				}).then(function(data) {
					if (data.code == 0) {
						that.detailData = data.data
						that.detailData.person_images.forEach(item=>{
							let arr = item.split('.')
							let obj = {
								image:item
							}
							if(arr[arr.length-1] == 'jpg' || arr[arr.length-1] == 'jpeg' || arr[arr.length-1] == 'png' || arr[arr.length-1] == 'PNG' || arr[arr.length-1] == 'JPG'){
								obj.type = 'img'
							}else {
								obj.type = 'video'
							}
							that.swiperList.push(obj)
						})
						
						that.getTimes()
					} else {

					}
				})
			},
			getTimes() {
				var that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianWorkTime",
					method: "get"
				}, {
					technician_id: this.id,
					day: this.day
				}).then(function(data) {
					if (data.code == 0) {
						for (let i = 0; i < data.data.length; i++) {
						    if (data.data[i].status) { // 这里的 condition 为某种特定条件
								that.fast_time = data.data[i].time
						        break; // 如果满足条件则跳出循环
						    }
						}
						// that.fast_time = data.data[0].time
						// let times = {
						// 	day: 0,
						// 	time: data.data[0].time,
						// 	week: '今天'
						// }
						
						getApp().globalData.selectiveTime = that.fast_time
						
					} else {

					}
				})
			},
		}

	}
</script>

<style lang="scss">
	#transparent {
		background: transparent;
	}
	.all-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: #fff;

		.back {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.menu-list {
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 82rpx;

			.item-menu {
				line-height: 76rpx;
				text-align: center;
			}

			.selectmenu {
				color: #EF5233;
			}

			.lines {
				width: 64rpx;
				height: 6rpx;
				background: #EF5233;
				border-radius: 6rpx;
			}
		}
	}

	//
	//
	.massage-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		background-color: rgba(0, 0, 0, 0);
		position: relative;
		z-index: 999;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		padding-top: calc(var(--status-bar-height) + 10px);
		padding-bottom: 20rpx;
		.title {
			color: #fff;
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}

		.right-icon {
			display: flex;
			align-items: center;
		}
	}

	.massage-img-top {
		background: url('https://img0.baidu.com/it/u=1302187753,1022585962&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=13ebea0b989899b3b933c19938b23f76')no-repeat;
		background-size: 100% 100%;
		height: 724rpx;
	}

	//
	.technician-imgs {
		width: 100%;
		height: 804rpx;

		swiper {
			width: 100%;
			height: 804rpx;
		}

		.swiper-item {
			width: 100%;
			height: 804rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			video{
				width: 100%;
				height: 90%;
			}
			.play-icon{
				width:100rpx;
				height: 100rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

			}
		}
	}

	.choose-content {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #F5F7F8;
		margin-top: -60rpx;
		position: relative;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
	}

	//
	.imgs-choose {
		width: 226rpx;
		height: 50rpx;
		background: #EBEBEB;
		border-radius: 290rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.select-btn {
			width: 109rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 29rpx;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			text-align: center;
			line-height: 42rpx;
		}

		view {
			width: 109rpx;
			height: 42rpx;
			line-height: 42rpx;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;

		}
	}

	//
	.technician-info-content {
		background-color: #F5F7F8;
		margin-top: -40rpx;
		padding: 30rpx;

		.inner-content {
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 30rpx;
			margin-top: 30rpx;
		}
	}

	//

	.qualification-list {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FEF5E0;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		.qualification-item {
			image {
				width: 24rpx;
				height: 22rpx;
				margin-right: 11rpx;
			}

			display: flex;
			align-items: center;
			font-size: 22rpx;
			font-family: PingFangSC,
			PingFang SC;
			font-weight: 400;
			color: #6E4E37;
			height: 70rpx;
			line-height: 70rpx;
		}

		.look-detail {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #6E4E37;
			line-height: 70rpx;
			display: flex;
			align-items: center;
		}

	}

	//
	.technician-popup-info {
		.technician-info-lines {
			display: flex;
			align-items: center;
			.name {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #07080A;
			}
			.today-no-time{
				height: 32rpx;
				padding: 0 12rpx;
				background-color: #efefef;
				border-radius: 8rpx;
				line-height: 32rpx;
				margin-left: 26rpx;
				.titles {
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.today-time {
				width: 186rpx;
				height: 32rpx;
				margin-left: 26rpx;
				background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/bg.png')no-repeat;
				background-size: 100% 100%;
				display: table;
				.titles {
					width: 50%;
					text-align: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: table-cell;
					vertical-align: middle;
				}
				.time {
					width: 50%;
					text-align: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #EF5233;
					display: table-cell;
					vertical-align: middle;
				}
			}

			.age {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #07080A;
				margin-left: 20rpx;
			}

			.right-address {
				display: flex;
				align-items: center;
				margin-left: auto;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #757575;

				image {
					width: 17rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
			}
		}

		.authentication-information {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.attion-num {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #BEBEC1;
				text-align: center;

				image {
					width: 158rpx;
					height: 59rpx;
				}
			}
		}
	}

	.technician-datum-list-content {
		background-color: #F5F6F7;
		margin-top: 20rpx;
	}
	.shop-lines{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		view{
			margin-left: 10rpx;
			line-height: 30rpx;
		}
	}
	.technician-datum-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 16rpx;

		.item-datum {
			display: flex;
			align-items: center;
			flex-basis: 33.3333%;
			margin-bottom: 20rpx;

			.titles {
				font-size: $uni-font-size-base;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #888889;
				flex: 0 0 auto;
			}

			.desc {
				font-size: $uni-font-size-base;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #0F0807;
				margin-left: 8rpx;
				max-width: 100rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex-grow: 1;
			}
		}
	}
	.brief-introduction {
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #0F0807;
		background-color: #F5F6F7;
	}

	//
	.serve-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.serve-left-title {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #07080A;

			image {
				width: 38rpx;
				height: 50rpx;
				margin-right: 17rpx;
			}
		}

		.nums {
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #07080A;
			display: flex;
			align-items: center;

			text {
				color: #EF5233;
				margin-left: 8rpx;
			}
		}
	}
</style>